<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <title>电子围栏</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- baidu-map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />

  <style type="text/css">
    .el-aside {
      /* background-color: #D3DCE6; */
      color: #333;
      padding: 10px;
    }
    .el-main {
      /* background-color: #E9EEF3; */
      color: #333;
      text-align: center;
    }
    .el-container {
      margin-bottom: 40px;
    }
    /* baidu map */
    /* body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} */
		#allmap{overflow:hidden;zoom:1;position:relative;}
    #fenceMap{position: absolute;top:10px;right: 10px}
    .resetPadding{padding: 0}
    .fenceType{
      display: inline-block;
      background: #d6d6d6;
      width: 50px;
      height: 28px;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
    }
    .ico_rectangle{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -2px;
      width: 50px;
      height: 28px;
    }
    .ico_polygon{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -31px;
      width: 50px;
      height: 28px;
    }
    .ico_circle{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -60px;
      width: 50px;
      height: 28px;
    }
    .ico_close{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -90px;
      width: 50px;
      height: 28px;
    }
    .ico_boundary{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -120px;
      width: 50px;
      height: 28px;
    }
  </style>
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="appShow" class="animated fadeInRight">
    <el-form>
      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="选择时间：" label-width="90px">
            <!-- <el-input size="small" clearable v-model="ncircleName" placeholder="输入名称新增围栏"></el-input> -->
            <el-date-picker
              v-model="TimeValue"
              type="datetimerange"
              align="center"
              size="small"
              style="width:335px;font-size: 12px"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col >
          <el-form-item label-width="10px">
            <el-button type="primary" size="small" @click="posRequest">搜  索</el-button>
          </el-form-item>
        </el-col>        
      </el-row>
    </el-form>
    <div style="margin-bottom:15px">
        <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="newAdd">新 增</el-button>
    </div>
    
    <el-table :data="formTable.list" border size="small" style="width:100%" class='cursor'>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="circleName" label="围栏名称"></el-table-column>
      <el-table-column prop="fenceType" label="围栏类型">
        <template slot-scope="scope">
          <span class="fenceType"><i :class="'ico_'+scope.row.fenceType"></i></span>
        </template>
      </el-table-column>
      <el-table-column prop="gmt_create" label="创建时间"></el-table-column>
      <el-table-column prop="gmt_modified" label="修改时间"></el-table-column>
      <el-table-column label="操作" width="270">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click.stop="carInfoClick(scope.row)">编辑约束</el-button>
          <el-button size="mini" type="primary" plain @click.stop="fenceInfoClick(scope.$index,scope.row)">编辑围栏</el-button>
          <el-button size="mini" type="info" @click.stop="deleteClick(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="formData.pageSize"
      :current-page.sync="formData.page"
      :total="formTable.totalCount"
      @current-change="handleCurrentChange">
    </el-pagination>
    <!-- 编辑、新增围栏 map -->
    <el-dialog
      title="围栏"
      :visible.sync="dialogFenceMap"
      :close-on-click-modal="false">
        <div id="allmap">	
            <div id="map" style="height:600px"></div>
            <div id="fenceMap">
              <el-button-group>
                <el-button type="primary" size="small" @click="switchShape()" class="resetPadding"><i class="ico_close"></i></el-button>
                <el-button type="primary" size="small" @click="switchShape('rectangle')" class="resetPadding"><i class="ico_rectangle"></i></el-button>
                <el-button type="primary" size="small" @click="switchShape('polygon')" class="resetPadding"><i class="ico_polygon"></i></el-button>
                <el-button type="primary" size="small" @click="switchShape('circle')" class="resetPadding"><i class="ico_circle"></i></el-button>
              </el-button-group>
            </div>
        </div>        
    </el-dialog>
    <!-- 新增/修改--围栏 -->
    <el-dialog
      title="保存围栏"
      :visible.sync="dialogFenceVisible"
      :before-close="handleClose"
      width="30%">
      <el-form :model="fenctData" ref="fenctData" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="围栏名称："
          prop="circleName"
          :rules="[
            { required: true, message: '围栏名称不能为空'}
          ]"
        >
          <el-input v-model="fenctData.circleName" size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="围栏属性："
          prop="driveType"
          :rules="[
            { required: true, message: '围栏属性不能为空'}
          ]"
        >
          <el-select v-model="fenctData.driveType" size="small" placeholder="请选择" style="width:100%">
            <el-option key="1" label="禁止驶出围栏范围" value="1"></el-option>
            <el-option key="2" label="禁止驶入围栏范围" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="围栏类型："
          prop="fenceType"
        >
          <el-input v-model="fenctData.fenceType" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="起点："
          prop="fenceType"
          v-show="fenctData.fenceStart"
        >
          <el-input v-model="fenctData.fenceStart" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="终点："
          prop="fenceType"
          v-show="fenctData.fenceEnd"
        >
          <el-input v-model="fenctData.fenceEnd" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="圆心："
          prop="fenceType"
          v-show="fenctData.fenceCenter"
        >
          <el-input v-model="fenctData.fenceCenter" size="small" disabled></el-input>
        </el-form-item>
        
        <el-form-item
          label="半径："
          prop="fenceType"
          v-show="fenctData.fenceRadius"
        >
          <el-input v-model.number="fenctData.fenceRadius" size="small" disabled></el-input>
        </el-form-item>
        
        <!-- <el-form-item
          label="坐标点集合："
          prop="pointList"
        >
          <el-input v-model.number="fenctData.pointList" size="small">
              <i slot="suffix" class="el-icon-edit el-input__icon" @click="handleIconClick" style="cursor:pointer"></i>
          </el-input>
        </el-form-item> -->
        <el-form-item>
            <el-button @click="handleClose" size="small" >取 消</el-button>
            <el-button type="primary" plain @click="handleIconClick" size="small"  v-show="fenctData.id" >重新绘制</el-button>
            <el-button type="primary" @click="submitForm('fenctData')" size="small" >提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑约束 条件 -->
    <el-dialog title="编辑约束车辆" :visible.sync="dialogConstraintVisible">
      <el-row :gutter="20">
        <el-col :span="12">
          <div>
            <!-- <el-button type="primary" size="small" icon="el-icon-circle-plus">新增</el-button> -->
            <el-button type="primary" size="small" icon="el-icon-delete" @click="removeFenceAndVehicle" :disabled="selectINID.length ?false: true">移出约束</el-button>
          </div>
          <br>
          <el-button type="text">注：当前是围栏控制车辆列表</el-button>
          <el-table :data="dataINFence.list" border highlight-current-row size="small" :height="windowHeight -200" style="width:100%"  class='cursor'  @selection-change="handleINChange" :row-key="getRowKeysIN" ref="IN">
            <el-table-column type="selection" label="" :reserve-selection="true"></el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="plateNo" label="车牌号"></el-table-column>
            <el-table-column prop="vinCode" label="车架号"></el-table-column>
          </el-table>
          <br>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="formINFence.pageSize"
            :total="dataINFence.totalCount"  
            :current-page.sync="formINFence.page"
            @current-change="handleINCurrentChange">
          </el-pagination>
        </el-col>
        <el-col :span="12">
          <div>
            <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="bindFenceAndVehicle" :disabled="selectOUTID.length ?false: true">添加到约束</el-button>
          </div>
          <br>
          <el-button type="text">注：勾选车辆可添加到左侧围栏控制列表</el-button>
          <el-table :data="dataOUTFence.list" border highlight-current-row size="small" :height="windowHeight - 200" style="width:100%" class='cursor' @selection-change="handleOUTChange" :row-key="getRowKeysOUT" ref="OUT">
            <el-table-column type="selection" label="" :reserve-selection="true"></el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="plateNo" label="车牌号"></el-table-column>
            <el-table-column prop="vinCode" label="车架号"></el-table-column>
          </el-table>
          <br>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="formOUTFence.pageSize"
            :total="dataOUTFence.totalCount"  
            :current-page.sync="formOUTFence.page"
            @current-change="handleOUTCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script src="../js/mars2baidu.js"></script>
  <script>
    var map,drawingManager,overlays = [];
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          appShow:true,
          dialogFenceVisible:false,//编辑
          dialogFenceMap:false,//地图
          dialogConstraintVisible:false,//约束条件
          isable:true,
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight)-205,//150
          TimeValue:[],
          formTable:[],//table围栏列表
          fenctData:[],//当前围栏数据
          fenctRow:[],//围栏行数据
          formData:{
            page:1,
            pageSize:15
          },
          dataINFence:[],
          formINFence:{
            page:1,
            pageSize:15
          },
          dataOUTFence:[],
          formOUTFence:{
            page:1,
            pageSize:15
          },
          selectOUTID:[],//添加到约束车辆
          selectINID:[],//已添加的约束车辆
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.posRequest() 
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
          //newAdd--新增围栏--模态框
          newAdd:function(){
            var _this = this;
            this.dialogFenceMap = true;
            // 
            if(drawingManager){
              drawingManager.close();
              this.removeAllFence()
            }
            if(!document.getElementById("map")){
              setTimeout(function(){ 
                _this.showMap()
              },500)
            }
            
          }, 
          //新增围栏---提交事件
          submitForm(formName) {
            var _this = this;
            this.$refs[formName].validate((valid) => {
              if (valid) {
                if(_this.fenctData.id){
                  resourceRequst("/circleFence/updateCircleFence",_this.fenctData,function(res){
                    _this.dialogFenceMap = false
                    _this.handleClose()
                    _this.posRequest()
                  }) 
                }else{
                  resourceRequst("/circleFence/addCircleFence",_this.fenctData,function(res){
                    _this.dialogFenceMap = false
                    _this.handleClose()
                    _this.posRequest()
                  }) 
                }
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          // 取消围栏
          handleClose(done) {
            this.dialogFenceVisible = false;
            this.fenctData={};
            if(overlays.length){
              this.removeAllFence()           
              drawingManager.close();
            }
          },
          newSubmit:function(){
            if(overlays.length>1){
              this.$message({ type: 'info', message: "只能保存一个围栏！！"});
              return
            }
            var _this = this;
            this.$prompt('请输入围栏名称', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputErrorMessage: 'is error'
            }).then(function({value}) {
              return _this.newSubmitPost(value)
            }).catch(function(){
              return _this.$message({type: 'info',message: '取消输入'});       
            });
          },
          // 新增围栏--调用接口
          newSubmitPost:function(value){
            var name = value?value.trim():'';
            if(!name){
              this.$message({message: '警告哦，请先填写围栏名称',type: 'warning'});
              return 
            }

            this.$http.post(apiUrl.zhangong+'/circleFence',{
              circleName:value,
              circleFence:JSON.stringify(this.fenctData)
            },{
              withCredentials: true,
            })
            .then(function(res){
              vm.$message({ type: 'success', message: res.body.info});
              vm.removeAllFence()
              vm.fenctData=[]
              vm.posRequest()
            },function(res){
              vm.$message({message: res.body.info,type: 'warning'});
            })
          },
          // 围栏分页
          handleCurrentChange:function(val){
            // this.formData.page = val
            this.posRequest()
          },
          /**
           * 编辑约束车辆
           * handleOUTCurrentChange -- OUT分页
           * handleOUTChange --- INOUT checkbox
           * bindFenceAndVehicle === 添加到约束
           * removeFenceAndVehicle === 移除约束
            */
          carInfoClick:function(row){
            var _this = this;
            this.formINFence.fenceId = row.id;
            this.formOUTFence.page = 1;
            this.formINFence.page = 1;
            var dataIN = {
              fenceId:row.id,
              page:1,
              pageSize:this.formINFence.pageSize
            }
            // 围栏中的车辆
            const p1 = new Promise(function(resolve, reject){
                resourceRequst("/circleFence/queryVehicleByFenceId",dataIN,function(res){
                  resolve(res)
                })              
            })
            // 围栏外的车辆
            var dataOUT = {
              page:1,
              pageSize:this.formOUTFence.pageSize
            }     
            const p2 = new Promise(function(resolve, reject){
                resourceRequst("/circleFence/queryVehicleNotInFence",dataOUT,function(res){
                  resolve(res)
                })              
            })      
            Promise.all([p1,p2]).then(function(res){
              _this.dataINFence = res[0]
              _this.dataOUTFence = res[1]
              _this.dialogConstraintVisible = true
              if(!_this.$refs.OUT || !_this.$refs.IN) return
              if(_this.$refs.OUT.selection.length || _this.$refs.IN.selection.length){
                _this.$refs.IN.clearSelection();
                _this.$refs.OUT.clearSelection();
              }
            })

          },
          handleOUTCurrentChange:function(){
            var _this = this
            resourceRequst("/circleFence/queryVehicleNotInFence",this.formOUTFence,function(res){
              _this.dataOUTFence = res
            }) 
          },
          handleINCurrentChange:function(){
            var _this = this
            resourceRequst("/circleFence/queryVehicleByFenceId",this.formINFence,function(res){
              _this.dataINFence = res
            }) 
          },
          handleOUTChange:function(row){
            var selectOUTID = row.map(function(item){
              return item.id
            })
            this.selectOUTID = selectOUTID
          },
          handleINChange:function(row){
            var selectINID = row.map(function(item){
              return item.id
            })
            this.selectINID = selectINID
          },
          bindFenceAndVehicle:function(){
            var _this = this
            var params = {
              fenceId:this.formINFence.fenceId,
              vehicleIdList:this.selectOUTID
            }
            resourceRequst("/circleFence/bindFenceAndVehicle",params,function(res){
              _this.carInfoClick({id:_this.formINFence.fenceId})
            })             
          },
          removeFenceAndVehicle:function(){
            var _this = this
            var params = {
              fenceId:0,
              vehicleIdList:this.selectINID
            }
            resourceRequst("/circleFence/bindFenceAndVehicle",params,function(res){
              _this.carInfoClick({id:_this.formINFence.fenceId})
            }) 
            
          },
          // 保留之前历史选中数据
          getRowKeysIN:function(row){
            return row.id
          },
          getRowKeysOUT:function(row){
            return row.id
          },
          //删除围栏
          deleteClick:function(index,row){
            var _this = this
            this.$confirm('此操作将删除该围栏信息, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(function(){
              resourceRequst("/circleFence/deleteCircleFence",{fenceId:row.id},function(res){
                _this.posRequest()
              }) 
            }).catch(function(){
              console.log("取消操作！")
            });
          },
          //编辑围栏
          fenceInfoClick:function(index,row){    
            var rowData = JSON.stringify(row);
            this.fenctData = JSON.parse(rowData);
            this.dialogFenceVisible = true
          },
          //编辑围栏----重新绘制围栏图形
          handleIconClick:function(){
             var row = this.fenctData 
             this.newAdd()//显示 模态框 地图
             setTimeout(function(){               
              if(!!row){
                var data = JSON.stringify(row);
                data = JSON.parse(data);
                // data.pointList = JSON.parse(data.pointList);
                if(data.fenceType == "circle"){
                  var H = JSON.parse(data.pointList);
                  var HP = coordtransform.wgs84togbd09(H.lng,H.lat)
                  data.pointList = {
                    lng:HP[0],
                    lat:HP[1],
                  }
                }else{
                  var H = JSON.parse(data.pointList);
                  data.pointList = _.map(H,function(item){
                    var HP = coordtransform.wgs84togbd09(item.lng,item.lat)
                    return new BMap.Point(HP[0], HP[1])
                  })
                }
                
                var polygon = {};
                
                if(data.fenceType == "circle"){//圆形
                  var point = new BMap.Point(data.pointList.lng, data.pointList.lat);
                  map.centerAndZoom(point,15);
                  polygon = new BMap.Circle(data.pointList,data.radius, {
                      strokeColor: "red", 
                      fillColor: "red", 
                      strokeWeight: 3, 
                      strokeOpacity: 0.8 
                  });
                }else{
                  map.setViewport(data.pointList);
                  polygon = new BMap.Polygon(data.pointList, {
                      strokeColor: "red", 
                      fillColor: "red", 
                      strokeWeight: 3, 
                      strokeOpacity: 0.8 
                  });  //创建多边形
                }
                map.addOverlay(polygon);
                overlays.push(polygon);                
              }
            },500)
          },
          // 切换绘制形状
          switchShape:function(shape){
            // 判断是否是修改
            if(this.fenctData.id){
              this.removeAllFence()
            }
            drawingManager.open()
            if(shape){
              drawingManager.setDrawingMode(shape)
            }else{
              drawingManager.close()
            }
          },
          // 请求围栏列表
          posRequest:function(){
            var _this = this,startTime="",endTime="";
            if(this.TimeValue && this.TimeValue.length){
              startTime = this.TimeValue[0]
              endTime = this.TimeValue[1]
            }
            var data = {
              page:this.formData.page,
              pageSize:this.formData.pageSize,
              startTime:startTime,
              endTime:endTime
            }
            resourceRequst("/circleFence/queryCircleFence",data,function(res){
              _this.formTable = res
            }) 
          },
          /**显示 围栏 地图
          ** drawingManager.getDrawingMode();//获取当前 绘制模式
          ** drawingManager.setDrawingMode();//设置当前 绘制模式
          ** drawingManager.close()//开启，关闭绘制模式
          **/ 
          showMap:function(){
            var _this = this;
            var styleOptions = {
                strokeColor:"red",    //边线颜色。
                fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 2,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
            }
            map = new BMap.Map('map',{enableMapClick:false});
            var point = new BMap.Point(116.307852,40.057031);
            map.centerAndZoom(point, 16);
            map.enableScrollWheelZoom(); 
            map.addControl(new BMap.CityListControl({
              anchor: BMAP_ANCHOR_TOP_LEFT,
              onChangeSuccess:function(res){
                var bdary = new BMap.Boundary();
                bdary.get(res.city, function(rs){       //获取行政区域
                  map.clearOverlays();        //清除地图覆盖物       
                  var count = rs.boundaries.length; //行政区域的点有多少个
                  if (count === 0) {
                    alert('未能获取当前输入行政区域');
                    return ;
                  }
                  var pointArray = [];
                  for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], styleOptions); //建立多边形覆盖物
                    map.addOverlay(ply);  //添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                  }    
                  map.setViewport(pointArray);    //调整视野  
                  overlaycomplete({drawingMode:'boundary',pointList:pointArray,overlay:ply})
                });   
              }
            }));
            var overlaycomplete = function(e){               
                var getAllPath=[],getCenter={},getRadius={};
                var data = {};//转换基础数据
                if(e.drawingMode == 'boundary'){
                  // 行政区域
                  console.log(e)
                  getAllPath = _.map(e.pointList,function(item){
                    var HB = coordtransform.gbd09towgs84(item.lng,item.lat)
                    var HP = {
                      lng:HB[0],
                      lat:HB[1]
                    }
                    return HP
                  })

                }else if(e.drawingMode == 'circle'){
                  // 圆型
                  var HC = coordtransform.gbd09towgs84(e.overlay.getCenter().lng,e.overlay.getCenter().lat)
                  var HCP = {
                    lng:HC[0],
                    lat:HC[1]
                  }
                  getCenter = HCP
                }else{
                  // 多边形
                  getAllPath = _.map(e.overlay.getPath(),function(item){
                    var H = coordtransform.gbd09towgs84(item.lng,item.lat)
                    var HP = {
                      lng:H[0],
                      lat:H[1]
                    }
                    return HP
                  })
                }  
                switch (e.drawingMode)
                {
                  case 'circle'://圆
                    data = {
                      fenceType:e.drawingMode,
                      pointList:JSON.stringify(getCenter),
                      radius:e.overlay.getRadius(),
                      // 圆心，半径，起点，终点
                      fenceCenter:JSON.stringify(getCenter),
                      fenceRadius:e.overlay.getRadius(),
                      fenceStart:null,
                      fenceEnd:null
                    }
                  break;
                  case 'polygon'://多边形
                    data = {
                      fenceType:e.drawingMode,
                      pointList:JSON.stringify(getAllPath),
                      // 圆心，半径，起点，终点
                      radius:null,
                      fenceCenter:null,
                      fenceRadius:null,
                      fenceStart:JSON.stringify(getAllPath[0]),
                      fenceEnd:JSON.stringify(getAllPath[getAllPath.length - 1]),
                    }
                  break;
                  case 'rectangle'://矩形  
                    data = {
                      fenceType:e.drawingMode,
                      pointList:JSON.stringify(getAllPath),
                      // 圆心，半径，起点，终点
                      radius:null,
                      fenceCenter:null,
                      fenceRadius:null,
                      fenceStart:JSON.stringify(getAllPath[0]),
                      fenceEnd:JSON.stringify(getAllPath[getAllPath.length - 1]),
                    }
                  case 'boundary'://行政区域
                    data = {
                      fenceType:e.drawingMode,
                      pointList:JSON.stringify(getAllPath),
                      // 圆心，半径，起点，终点
                      radius:null,
                      fenceCenter:null,
                      fenceRadius:null,
                      fenceStart:JSON.stringify(getAllPath[0]),
                      fenceEnd:JSON.stringify(getAllPath[getAllPath.length - 1]),
                    }
                  break;
                }           
                overlays.push(e.overlay);
                _this.fenctData = Object.assign({}, _this.fenctData,data)
                _this.dialogFenceVisible = true
                if(_this.fenctData.id){
                  _this.dialogFenceMap = false
                }
            };

            //实例化鼠标绘制工具
            drawingManager = new BMapLib.DrawingManager(map, {
                isOpen: false, //是否开启绘制模式
                enableDrawingTool: false, //是否显示工具栏
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(5, 5),//偏离值
                    scale:0.8,
                    drawingModes:[BMAP_DRAWING_RECTANGLE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_CIRCLE]
                },
                circleOptions: styleOptions, //圆的样式
                polylineOptions: styleOptions, //线的样式
                polygonOptions: styleOptions, //多边形的样式
                rectangleOptions: styleOptions //矩形的样式
            });  
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            drawingManager.addEventListener('overlaycomplete', overlaycomplete);

          },
          // 删除所有围栏
          removeAllFence:function(){
            var len = overlays.length;
            for(var i=0;i<len;i++){
              map.removeOverlay(overlays[len-i-1]);
              overlays.length--
            }
          }
      }
    })
  </script>
</html>